<template>
  <div>
    <v-row no-gutters>
      <v-col v-for="item in links" :key="item.text">
        <div :class="['nav-link', item.active ? 'active' : '']">
          <span>{{ item.text }}</span>
          <span>{{ item.value }}</span>
        </div>
      </v-col>
    </v-row>
    <div class="line-space"></div>
    <div v-for="n in 3" :key="n">
      <v-card class="py-3" outlined flat tile>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon class="grey lighten-1 white--text">mdi-account</v-icon>
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>Reborn</v-list-item-title>
            <v-list-item-subtitle>学生/深圳</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-container class="px-4 py-0" fluid>
          <v-row>
            <v-col v-for="n in 3" :key="n" class="d-flex child-flex" cols="4">
              <v-card flat tile class="d-flex">
                <v-img
                  :src="`https://picsum.photos/500/300?image=${n * 5 + 10}`"
                  :lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
                  aspect-ratio="1"
                  class="grey lighten-2"
                >
                  <template v-slot:placeholder>
                    <v-row
                      class="fill-height ma-0"
                      align="center"
                      justify="center"
                    >
                      <v-progress-circular
                        indeterminate
                        color="grey lighten-5"
                      ></v-progress-circular>
                    </v-row>
                  </template>
                </v-img>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
        <div class="px-4 subtitle-2 text--primary">
          拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的……
        </div>
        <v-divider class="mt-3"></v-divider>
        <div
          class="subtitle-2 text--secondary px-4 pt-3 d-flex justify-space-between align-center"
        >
          <span>一周前</span>
          <div class="d-flex align-center">
            <v-btn icon x-small>
              <v-icon size="18">mdi-thumb-up-outline</v-icon>
            </v-btn>
            <span class="mr-3">1000</span>
            <v-btn icon x-small>
              <v-icon size="18">mdi-comment-text-multiple-outline</v-icon>
            </v-btn>
            <span>100</span>
          </div>
        </div>
      </v-card>
      <div class="line-space"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          text: '全部评价',
          value: 100,
          active: true
        },
        {
          text: '好评',
          value: 120
        },
        {
          text: '中评',
          value: 100
        },
        {
          text: '差评',
          value: 100
        },
        {
          text: '有图',
          value: 100
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding-top: 2px;
  span {
    font-size: 13px;
  }
  span:last-child {
    font-weight: bold;
  }
}

.nav-link.active {
  color: #2ab795;
}
</style>
